[id].vue 844 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div
  3. v-if="photos"
  4. class="flex flex-col gap-2"
  5. >
  6. <h1
  7. class="text-2xl text-center pt-2 font-semibold"
  8. v-text="photos.title"
  9. />
  10. <div class="flex flex-col gap-5 p-1 mb-2">
  11. <Image
  12. v-for="(photo, idx) of photos.photos"
  13. :key="idx"
  14. :src="photo"
  15. :min-height="300"
  16. rounded="md"
  17. />
  18. </div>
  19. </div>
  20. <div
  21. v-else
  22. class="w-screen h-full flex justify-center items-center"
  23. >
  24. <ILoader class="w-16 h-16 text-foreground" />
  25. </div>
  26. </template>
  27. <script setup lang="ts">
  28. const { $api } = useNuxtApp()
  29. const { params: { id } } = useRoute('gallery-id')
  30. const photos = ref<object>()
  31. definePageMeta({
  32. name: 'Фотографии',
  33. middleware: ['user-only'],
  34. })
  35. onMounted(async () => photos.value = await $api.gallery.getPhotos(id))
  36. </script>